<template>
  <div>
    <el-button type="danger" @click="insertDialogVisibility = true"
      >新建请假条</el-button
    >
    <el-dialog :visible.sync="insertDialogVisibility">
      <template slot="title">
        <span><el-icon name="edit"></el-icon>新建请假条</span>
      </template>
      <el-form
        ref="insertApply"
        class="insertApply"
        :model="insertApply"
        :rules="rules"
        label-position="right"
        label-width="auto"
      >
        <el-form-item prop="leaveType" label="请假类型：">
          <el-radio-group v-model="insertApply.leaveType">
            <el-radio v-for="i in leaveTypes" :key="i.index" :label="i.value">{{
              i.text
            }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="startTime" label="请假时间从：">
          <el-date-picker v-model="insertApply.startTime"> </el-date-picker>
        </el-form-item>
        <el-form-item prop="endTime" label="请假时间到：">
          <el-date-picker v-model="insertApply.endTime"> </el-date-picker>
        </el-form-item>

        <el-form-item prop="reason" label="请假原因：">
          <el-input type="textarea" :rows="4" v-model="insertApply.reason">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="insertApplySubmit()"
            >事件提交
          </el-button>
                    <slot
                      name="insertButton"
                      :mockInsert="mockInsert"
                      :sampleD="sampleD"
                    ></slot>
          <el-button
            type="warning"
            icon="el-icon-remove"
            @click="() => $refs.insertApply.resetFields()"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import New from './components/New.vue';

import { mapState } from "vuex";
import {leaveModuleApi} from "@/api/apis"
export default {
  //

  name: "InsertLeaveApply",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      insertApply: {
        startTime: "2021-07-27T06:40:33.163Z",
        endTime: "2021-07-27T06:40:33.163Z",
        reason: "前端开发太忙了请假",
        leaveType: "annualLeave",

        applier: "",
        applyState: "saved",
        auditState: "notAudit",
        auditor: null,
        auditorWord: "",
        leaveId: 0,
        applyTime: "2021-07-27T06:40:33.163Z",
      },
      insertDialogVisibility: false,
      rules: {
        startTime: [
          { required: true, message: "请输入请假开始时间", trigger: "change" },
          { validator: this.validateTime, trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请输入请假结束时间", trigger: "change" },
          { validator: this.validateTime, trigger: "change" },
        ],
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    ...mapState(["leaveTypes"]),
  },
  created() {},
  mounted() {},
  methods: {
    mockInsert() {
      let p;
      this.$refs.insertApply.validate((valid) => {
        if (valid) {
          p = leaveModuleApi.leaveInsertApi(this.insertApply)
          //         this.$http({
          //   method: "post",
          //   url: "/leaveAbout/leave",
          //   data: this.insertApply,
          // })
          .then(
            (res) => {
              this.$message.warning(JSON.stringify(res.data));
              this.insertDialogVisibility = false;
              return res;
            },
            (error) => {
              console.log(
                ".insertApply request error : " + error.response.status
              );
            }
          );
        } else {
          this.$message.warning("验证不通过请重新填写表单");
        }
      });

      return p;
    },
    insertApplySubmit() {
      this.$refs.insertApply.validate((valid) => {
        if (valid) {
          // this.$http({
          //   method: "post",
          //   url: "/leaveAbout/leave",
          //   data: this.insertApply,
          // })
          leaveModuleApi.leaveInsertApi(this.insertApply)
          .then(
            (res) => {
              this.$message.warning(JSON.stringify(res.data));
              this.insertDialogVisibility = false;

              //子组件 类比成被调用端  dao
              //父组件 类比成调用断   service controller
              this.$emit("postInsert", 1);
              //发布订阅模式

              //    发布者         河南新闻报        用户（发表读后感）
              //                   河北新闻报
              // this.$emit("postInsert1", 1);
              // this.$emit("postInsert2", 1);
              // this.$emit("postInsert3", 1);
              // this.$emit("postInsert4", 1);

              //  invoke
            },
            (error) => {
              this.$message.warning(error.response.status + " 请重新填写");
            }
          );
        } else {
          this.$message.warning("验证不通过请重新填写表单");
        }
      });
    },

    validateTime(rules, value, callback) {
      let start = new Date(this.insertApply.startTime);
      let end = new Date(this.insertApply.endTime);
      if (start.getTime() > end.getTime()) {
        return callback(new Error("开始时间要小于结束时间"));
      }
      callback();
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-dialog {
  .el-form-item {
    margin-top: 25px;
    .el-textarea {
      width: 360px;
    }
  }
}
</style>